<!--
 * @Author: 段本显
 * @Desc: 文件简介
 * @Date: 2021-08-06 11:40:34
 * @LastEditors: 段本显
 * @LastEditTime: 2021-09-15 09:47:51
 * @Email: duanbenxian@jianq.com
 * @Mark: 如果有bug，那肯定不是我的锅，噜噜噜
-->
<template>
  <el-container>
    <el-aside class="aside" width="200px">Aside</el-aside>
    <el-container>
      <el-header class="header">Header</el-header>
      <el-main class="main">
        <i class="icon-add_input"></i>
        <router-view></router-view>
      </el-main>
      <el-footer class="footer">Footer</el-footer>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'App',
  setup() {
    const store = useStore()
    const direction = computed(() => store.state.transition.direction)
    return {
      direction
    }
  }
})
</script>

<style lang="scss">
@import '@/assets/sprite.css';
[class^='icon-'] {
  display: inline-block;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.header,
.footer {
  position: fixed;
  left: 200px;
  right: 0;
}
.header {
  top: 0;
}
.footer {
  bottom: 0;
}
.el-aside {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  // line-height: 200px;
}
.main {
  margin-left: 200px;
  padding: 60px 20px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 200vh;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
